<template>
	<view class="message-page">
		<CustomHeader title="消息" />
		<ul :style="{'padding-top': paddingTop + 'px'}">
			<li @click="onClickMessageDetail(item)" v-for="(item,index) in list" :key="index">
				<div class="avatar">
					<image :src="item.userProfile.avatar" mode=""></image>
				</div>
				<div class="right-wrap">
					<div class="info">
						<h3>{{item.userProfile.nick}}</h3>
						<p v-if="item.lastMessage.payload.imageInfoArray">[图片]</p>
						<p v-else-if="item.lastMessage.payload.extension">{{item.lastMessage.payload.extension | handleText}}</p>
					</div>
					<div class="tips">
						<div class="date">{{handleDate(item.lastMessage.lastTime)}}</div>
						<div class="unreadCount">
							<i v-if="item.unreadCount > 0">{{item.unreadCount}}</i>
						</div>
					</div>
				</div>
			</li>
		</ul>

		<Tabbar :activePath="user && user.identity == 1 ? 1 : 3" />
	</view>
</template>

<script>
	import Tabbar from '@/components/custom-tabbar.vue'
	import moment from '@/plugins/moment.min.js'
	import CustomHeader from '@/components/custom-header.vue'
	const app = getApp()
	export default {
		components: {
			Tabbar,
			CustomHeader
		},
		data() {
			return {
				list: [],
				paddingTop: 0
			};
		},
		onLoad() {
			uni.$TUIKit.on(uni.$TUIKitEvent.SDK_READY, this.onReceived);
			this.paddingTop = getApp().globalData.navHeight
		},
		created() {
			wx.hideHomeButton()
		},
		onShow() {
			this.updateList()
			this.getUnread()
		},
		filters: {
			handleText(value) {
				if (value.indexOf('TYPE_INVITE') != -1 || value.indexOf('TYPE_SUCCESSINVITE') != -1) {
					return '[面试邀请]'
				} else if (value.indexOf('TYPE_DELIVERY_') != -1) {
					return '[发送简历]'
				} else {
					return value
				}
			}
		},
		computed: {
			user() {
				return uni.getStorageSync('userInfo')
			},
			// messageList() {
			// return app.globalData.conversationList.map(x => {
			// 	console.log(x)
			// 	x.lastMessage.payload.extension = x.lastMessage.payload && this.asciiToNative(x.lastMessage
			// 		.payload.extension).replace(
			// 		/^["|'](.*)["|']$/g, "$1")
			// 	return x
			// })
			// },
			handleDate() {
				return value => {
					let date = Number(value + '000')
					var today = moment().startOf('day');
					if (moment(date).isSame(today, 'd')) {
						return moment(Number(value + '000')).format("HH:mm")
					} else {
						return moment(Number(value + '000')).format("MM-DD HH:mm")
					}
				}
			}
		},
		onUnload() {
			uni.$TUIKit.off(uni.$TUIKitEvent.SDK_READY, this.onReceived);
		},
		methods: {
			async getUnread() {
				const result = await this.$http.Message.unread()
				getApp().globalData.allUnread = result.data.all
			},
			onReceived(e) {
				console.log(e)
				this.updateList()
			},
			updateList() {
				// 获取全量的会话列表

				let promise = uni.$TUIKit.getConversationList();

				promise.then(imResponse => {

					const conversationList = imResponse.data.conversationList; // 全量的会话列表，用该列表覆盖原有的会话列表
					this.list = conversationList.map(x => {
						if (x.lastMessage.payload.url) {
							x.lastMessage.payload.extension = '[语音消息]'
							return x
						} else if(x.lastMessage.payload.imageInfoArray) {
							return x
						} else {
							x.lastMessage.payload.extension = x.lastMessage.payload && this.asciiToNative(x
								.lastMessage
								.payload.extension).replace(
								/^["|'](.*)["|']$/g, "$1")
							return x
						}

					})

				}).catch(function(imError) {

					console.warn('getConversationList error:', imError); // 获取会话列表失败的相关信息

				});
			},
			onClickMessageDetail(item) {
				console.log(item)
				uni.navigateTo({
					url: "/pages/message/chart?sendId=" + item.userProfile.userID
				})
			},
			asciiToNative(content) {
				if (!content) {
					return false;
				}
				content = content.split("\\u");
				let native = content[0];
				for (let i = 1; i < content.length; i++) {
					let code = content[i];
					native += String.fromCharCode(parseInt("0x" + code.substring(0, 4)));
					if (code.length > 4) {
						native += code.substring(4, code.length);
					}
				}
				return native;
			},
		}
	}
</script>

<style lang="less" scoped>
	.message-page {
		ul {
			padding-top: 16upx;

			li {
				display: flex;
				align-items: center;
				padding-left: 46upx;
				padding-right: 50upx;
				margin-top: 32upx;

				.avatar {
					image {
						width: 104upx;
						height: 104upx;
						border-radius: 104upx;
					}
				}

				.right-wrap {
					border-bottom: 1px solid #EEEEEE;
					flex: 1;
					display: flex;
					margin-left: 32upx;
					padding-bottom: 26upx;
					padding-top: 6upx;
				}

				.info {
					display: flex;
					flex-direction: column;

					flex: 1;

					h3 {
						color: #28211F;
						font-size: 28upx;
						font-weight: 600;
						height: 44upx;
						line-height: 44upx;
						overflow: hidden; //溢出隐藏
						text-overflow: ellipsis; //文本显示省略号    /*默认是clip 超出部分直接切除*/
						whitewhite-space: nowrap; //不换行  /*默认normal 自动换行*/
						word-break: break-all;
					}

					p {
						font-size: 24upx;
						color: #666E7A;
						font-weight: 400;
						line-height: 24upx;
						width: 314upx;
						overflow: hidden; //溢出隐藏    
						text-overflow: ellipsis; //文本显示省略号    /*默认是clip 超出部分直接切除*/
						whitewhite-space: nowrap; //不换行  /*默认normal 自动换行*/
						word-break: break-all;
						height: 48upx;
						line-height: 48upx;
					}
				}

				.tips {
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					align-items: flex-end;

					.date {
						color: #666E7A;
						font-size: 22upx;
						font-weight: 400;
					}

					.unreadCount {
						width: 40upx;
						height: 40upx;
						margin-top: 12upx;
					}

					i {
						display: flex;
						align-items: center;
						justify-content: center;
						height: 40upx;
						line-height: 40upx;

						width: 40upx;

						border-radius: 40upx;
						box-sizing: border-box;
						color: #fff;
						font-size: 22upx;
						font-weight: 500;
						line-height: 22upx;
						background: #FD7753;
						text-align: center;
					}
				}
			}
		}
	}
</style>
